import React, { useState, useMemo } from 'react';

const UseMemo = () => {
  const [xiaoHong, setXiaoHong] = useState('小红');
  const [zhiLing, setZhiLing] = useState('志玲');
  return (
    <>
      <button onClick={()=>{setXiaoHong(new Date().getTime())}}>小红</button>
      <button onClick={()=>{setZhiLing(new Date().getTime()+'come to us')}}>志玲</button>
      <ChildrenComponent name={xiaoHong}>
        {zhiLing}
      </ChildrenComponent>
    </>
  )
}

const ChildrenComponent = ({name, children}) => {
  const changeXiaoHong = () => {
    console.log('小红 come');
    return name + '，小红向我们走来。'
  }
  // 异常触发处理
  const actionXiaoHong = useMemo(()=>changeXiaoHong(name),[name]);
  return (
    <>
      <div>{actionXiaoHong}</div>
      <div>{children}</div>
    </>
  )
}

export default UseMemo;
